<template>
  <div class="menu-grid-panel">
    <el-form label-width="80px" size="small">
      <!-- 基础设置 -->
      <el-form-item label="每行数量">
        <el-slider
          v-model="localData.columns"
          :min="2"
          :max="5"
          show-stops
        ></el-slider>
      </el-form-item>

      <el-form-item label="间距">
        <el-slider
          v-model="localData.padding"
          :min="0"
          :max="20"
        ></el-slider>
      </el-form-item>

      <!-- 图标设置 -->
      <el-divider content-position="left">图标设置</el-divider>

      <el-form-item label="图标大小">
        <el-slider
          v-model="localData.iconSize"
          :min="16"
          :max="48"
        ></el-slider>
      </el-form-item>

      <el-form-item label="图标颜色">
        <el-color-picker v-model="localData.iconColor"></el-color-picker>
      </el-form-item>

      <el-form-item label="图片大小">
        <el-slider
          v-model="localData.imageSize"
          :min="30"
          :max="60"
        ></el-slider>
      </el-form-item>

      <el-form-item label="图片圆角">
        <el-slider
          v-model="localData.imageBorderRadius"
          :min="0"
          :max="50"
        ></el-slider>
      </el-form-item>

      <!-- 文本设置 -->
      <el-divider content-position="left">文本设置</el-divider>

      <el-form-item label="显示文本">
        <el-switch v-model="localData.showText"></el-switch>
      </el-form-item>

      <el-form-item label="文本大小">
        <el-slider
          v-model="localData.textSize"
          :min="10"
          :max="18"
        ></el-slider>
      </el-form-item>

      <el-form-item label="文本颜色">
        <el-color-picker v-model="localData.textColor"></el-color-picker>
      </el-form-item>

      <el-form-item label="文本高度">
        <el-slider
          v-model="localData.textHeight"
          :min="16"
          :max="30"
        ></el-slider>
      </el-form-item>

      <!-- 背景设置 -->
      <el-divider content-position="left">背景设置</el-divider>

      <el-form-item label="背景色">
        <el-color-picker v-model="localData.backgroundColor"></el-color-picker>
      </el-form-item>

      <el-form-item label="背景图">
        <el-upload
          class="bg-uploader"
          action="#"
          :show-file-list="false"
          :before-upload="beforeBgUpload"
        >
          <img v-if="localData.backgroundImage" :src="localData.backgroundImage" class="bg-image" />
          <el-icon v-else class="bg-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="圆角">
        <el-slider
          v-model="localData.borderRadius"
          :min="0"
          :max="20"
        ></el-slider>
      </el-form-item>

      <!-- 菜单管理 -->
      <el-divider content-position="left">菜单管理</el-divider>

      <el-form-item>
        <el-button type="primary" @click="showMenuDialog = true">管理菜单</el-button>
      </el-form-item>
    </el-form>

    <!-- 菜单管理对话框 -->
    <el-dialog
      v-model="showMenuDialog"
      title="菜单管理"
      width="70%"
    >
      <div class="menu-manager">
        <el-button type="primary" @click="addMenu">添加菜单</el-button>

        <el-table :data="localData.menuList" style="width: 100%; margin-top: 10px;">
          <el-table-column label="图标/图片" width="120">
            <template #default="scope">
              <img 
                v-if="scope.row.image" 
                :src="scope.row.image" 
                style="width: 40px; height: 40px; object-fit: cover;"
              />
              <el-icon 
                v-else 
                :size="24"
                :style="{ color: localData.iconColor || '#333333' }"
              >
                <component :is="getIconComponent(scope.row.icon)" />
              </el-icon>
            </template>
          </el-table-column>

          <el-table-column label="文本" prop="text"></el-table-column>

          <el-table-column label="链接" prop="link"></el-table-column>

          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button size="small" @click="editMenu(scope.$index)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteMenu(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showMenuDialog = false">取消</el-button>
          <el-button type="primary" @click="saveMenu">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 菜单编辑对话框 -->
    <el-dialog
      v-model="showMenuEditDialog"
      :title="isEditingMenu ? '编辑菜单' : '添加菜单'"
      width="50%"
    >
      <el-form :model="currentMenu" label-width="80px">
        <el-form-item label="图标类型">
          <el-radio-group v-model="currentMenu.iconType">
            <el-radio label="icon">图标</el-radio>
            <el-radio label="image">图片</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="图标" v-if="currentMenu.iconType === 'icon'">
          <el-select v-model="currentMenu.icon" placeholder="请选择图标">
            <el-option
              v-for="(icon, key) in iconOptions"
              :key="key"
              :label="key"
              :value="key"
            >
              <div style="display: flex; align-items: center;">
                <el-icon style="margin-right: 8px;">
                  <component :is="icon" />
                </el-icon>
                <span>{{ key }}</span>
              </div>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="图片" v-if="currentMenu.iconType === 'image'">
          <el-upload
            class="menu-uploader"
            action="#"
            :show-file-list="false"
            :before-upload="beforeImageUpload"
          >
            <img v-if="currentMenu.image" :src="currentMenu.image" class="menu-image" />
            <el-icon v-else class="menu-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>

        <el-form-item label="文本">
          <el-input v-model="currentMenu.text" placeholder="请输入菜单文本"></el-input>
        </el-form-item>

        <el-form-item label="链接">
          <el-input v-model="currentMenu.link" placeholder="请输入链接地址"></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showMenuEditDialog = false">取消</el-button>
          <el-button type="primary" @click="saveCurrentMenu">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { 
  Picture, 
  ShoppingCart, 
  User, 
  Setting, 
  Star, 
  Bell,
  Location,
  Phone
} from '@element-plus/icons-vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['update:data'])

// 图标选项
const iconOptions = {
  'picture': Picture,
  'shopping-cart': ShoppingCart,
  'user': User,
  'setting': Setting,
  'star': Star,
  'bell': Bell,
  'location': Location,
  'phone': Phone
}

// 本地数据
const localData = ref({})
const showMenuDialog = ref(false)
const showMenuEditDialog = ref(false)
const isEditingMenu = ref(false)
const editingIndex = ref(-1)
const currentMenu = ref({
  iconType: 'icon',
  icon: 'picture',
  image: '',
  text: '',
  link: ''
})

// 初始化数据
onMounted(() => {
  localData.value = { ...props.data }
})

// 监听数据变化
watch(() => props.data, (newVal) => {
  localData.value = { ...newVal }
}, { deep: true })

// 监听本地数据变化
watch(localData, (newVal) => {
  emit('update:data', newVal)
}, { deep: true })

// 获取图标组件
function getIconComponent(iconName) {
  return iconOptions[iconName] || Picture
}

// 添加菜单
function addMenu() {
  currentMenu.value = {
    iconType: 'icon',
    icon: 'picture',
    image: '',
    text: '',
    link: ''
  }
  isEditingMenu.value = false
  showMenuEditDialog.value = true
}

// 编辑菜单
function editMenu(index) {
  currentMenu.value = { ...localData.value.menuList[index] }
  editingIndex.value = index
  isEditingMenu.value = true
  showMenuEditDialog.value = true
}

// 保存当前菜单
function saveCurrentMenu() {
  if (!isEditingMenu.value) {
    // 添加新菜单
    if (!localData.value.menuList) {
      localData.value.menuList = []
    }
    localData.value.menuList.push({ ...currentMenu.value })
  } else {
    // 更新现有菜单
    localData.value.menuList[editingIndex.value] = { ...currentMenu.value }
  }

  showMenuEditDialog.value = false
}

// 删除菜单
function deleteMenu(index) {
  localData.value.menuList.splice(index, 1)
}

// 保存菜单列表
function saveMenu() {
  showMenuDialog.value = false
}

// 图片上传前处理
function beforeImageUpload(file) {
  // 这里应该上传到服务器，现在只是模拟
  const reader = new FileReader()
  reader.onload = (e) => {
    currentMenu.value.image = e.target.result
  }
  reader.readAsDataURL(file)
  return false // 阻止自动上传
}

// 背景图片上传前处理
function beforeBgUpload(file) {
  // 这里应该上传到服务器，现在只是模拟
  const reader = new FileReader()
  reader.onload = (e) => {
    localData.value.backgroundImage = e.target.result
  }
  reader.readAsDataURL(file)
  return false // 阻止自动上传
}
</script>

<style lang="scss" scoped>
.menu-grid-panel {
  .menu-manager {
    .menu-uploader {
      :deep(.el-upload) {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: 0.2s;

        &:hover {
          border-color: #409eff;
        }
      }

      .menu-image {
        width: 60px;
        height: 60px;
        display: block;
        object-fit: cover;
      }

      .menu-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
      }
    }

    .bg-uploader {
      :deep(.el-upload) {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: 0.2s;

        &:hover {
          border-color: #409eff;
        }
      }

      .bg-image {
        width: 100px;
        height: 60px;
        display: block;
        object-fit: cover;
      }

      .bg-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 60px;
        text-align: center;
        line-height: 60px;
      }
    }
  }
}
</style>
